<template>
  <div class="QuickTag__container">
    <span class="tag" :class="getColor">{{ value }}</span>
  </div>
</template>

<script >
export default {
  props: {
    type: {
      type: String,
      default: "blue",
    },
    value: {
      type: String,
      default: "",
    },
  },

  computed: {
    getColor() {
      switch (this.type) {
        case "success":
          return "success";
        case "warning":
          return "warning";
        case "danger":
          return "danger";
        case "info":
          return "info";
        default:
          return "primary";
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.QuickTag__container {
  display: inline-block;

  .tag {
    border-radius: 5px;
    padding: 3px 5px;
    font-size: 1.2rem;
    color: white;
    margin-right: 5px;
  }

  .success {
    background: linear-gradient(135deg, #67c23a, #009966);
  }

  .info {
    background: linear-gradient(135deg, #f4f4f4, #b4b4b4);
    color: #666;
  }

  .primary {
    background: linear-gradient(135deg, #409eff, #2878ff);
  }

  .warning {
    background: linear-gradient(135deg, #ff9966, #cc6600);
  }

  .danger {
    background: linear-gradient(135deg, #f56c6c, #990033);
  }
}
</style>